<template>
  <el-card shadow="always" style="height: 870px" body-style="padding:0">
    <div class="head1">
      <el-image  :src="url" style="height: 100%;width: 100%">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
      <el-avatar :size="120" :src="user.photo" @error="errorHandler" class="head2">
        <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"/>
      </el-avatar>
      <div class="name1">{{this.user.username}}</div>
      <div class="name3" @click="toggleShow"><i class="el-icon-edit-outline"></i> 编辑资料</div>
    </div>
    <br>
    <el-descriptions class="margin-top" title="个人简介" column="1"
                     style="position:relative;left: 10px;width: 350px;font-size: 15px">
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-picture-outline"></i>
          头像
        </template>
        <span v-show="user.show1">见上图<i class="el-icon-s-custom"></i></span>
        <el-upload
          v-show="user.show"
          class="upload-demo"
          ref="upload"
          action="/photo/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-change="handleChange"
          :file-list="fileList"
          :on-success="success"
          :multiple="false"
          >
          <el-button size="small" type="primary">点击上传（更新）</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500KB</div>
        </el-upload>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          账户名
        </template>
        <span v-show="user.show1">{{this.user.username}}</span>
        <el-input v-show="user.show"
                  type="text"
                  v-bind:placeholder=user.username
                  v-model=user.username
                  maxlength="20"
                  show-word-limit
        ></el-input>
        <!--      {{this.user.username}}-->
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-odometer"></i>
          年龄
        </template>
        <span v-show="user.show1">  {{this.user.age}}</span>
        <el-input v-show="user.show"
                  type="text"
                  v-bind:placeholder=user.age
                  v-model=user.age
                  maxlength="2"
                  show-word-limit
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-male"></i>
          <i class="el-icon-female"></i>
          性别
        </template>
        <span v-show="user.show1">  {{this.user.sex}}</span>
        <el-radio-group v-model="user.sex" v-show="user.show">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-message"></i>
          邮箱Email
        </template>
        <span v-show="user.show1"> {{this.user.email}}</span>
        <el-input v-show="user.show"
                  type="text"
                  v-bind:placeholder=user.email
                  v-model=user.email
                  maxlength="30"
                  show-word-limit
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号码
        </template>
        <span v-show="user.show1"> {{this.user.phone}}</span>
        <el-input v-show="user.show"
                  type="text"
                  v-bind:placeholder=user.phone
                  v-model=user.phone
                  maxlength="30"
                  show-word-limit
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          职业
        </template>
        <span v-show="user.show1">{{this.user.profession}}</span>
        <el-input v-show="user.show"
                  type="text"
                  v-bind:placeholder=user.profession
                  v-model=user.profession
                  maxlength="20"
                  show-word-limit
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-magic-stick"></i>
          个性签名
        </template>
        <span v-show="user.show1">{{this.user.sign}}</span>
        <el-input v-show="user.show"
                  type="text"
                  v-bind:placeholder=user.sign
                  v-model=user.sign
                  maxlength="20"
                  show-word-limit
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-magic-stick"></i>
          身高(cm)
        </template>
        <span v-show="user.show1">{{this.user.height}}</span>
        <el-input v-show="user.show"
                  type="text"
                  v-bind:placeholder=user.height
                  v-model=user.height
                  show-word-limit
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-magic-stick"></i>
          体重(kg)
        </template>
        <span v-show="user.show1">{{this.user.weight}}</span>
        <el-input v-show="user.show"
                  type="text"
                  v-bind:placeholder=user.weight
                  v-model=user.weight
                  show-word-limit
        ></el-input>
      </el-descriptions-item>
    </el-descriptions>
    <div  v-show="user.show" style="position: relative;left: 35%">
      <el-button type="primary" size="small" @click="toggleShow1" plain>确定</el-button>
      <el-button type="success" size="small"  @click="cancel" plain>取消</el-button>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "info",
  data(){
    return{
      fileList: [],
      url:require("@/assets/personal.png"),
      urlname:null,
      user:{
        // username:sessionStorage.getItem("username"),
        // nickname:sessionStorage.getItem("nickname"),
        // email:sessionStorage.getItem("email"),
        // age:sessionStorage.getItem("age"),
        // sex:sessionStorage.getItem("sex"),
        // phone:sessionStorage.getItem("phone"),
        // area:sessionStorage.getItem("area"),
        // profession:sessionStorage.getItem("profession"),
        // interset:sessionStorage.getItem("interset"),
        // sign:sessionStorage.getItem("sign"),
        id:null,
        photo:null,
        username:null,
        age:null,
        sex:null,
        email:null,
        phone:null,
        profession:null,
        sign:null,
        height:null,
        weight:null,
        show: false,
        show1:true
      }
    }
  },
  methods: {
    toggleShow: function () {
      this.user.show = !this.user.show;
      this.user.show1 = !this.user.show1;
    },
    toggleShow1: function () {
      this.user.show = !this.user.show;
      this.user.show1 = !this.user.show1;
      sessionStorage.setItem("username",this.user.username);
      sessionStorage.setItem("userPhone",this.user.phone);
      var url="/user";
      let data = new Object();
      data.age=parseInt(this.user.age);
      data.email=this.user.email;
      data.height=this.user.height;
      data.id= this.user.id;//用户id,由前端传入
      data.phone=this.user.phone;
      data.profession=this.user.profession;
      data.sex=this.user.sex;
      data.sign=this.user.sign;
      data.username=this.user.username;
      data.userphoto=this.user.photo;
      data.weight=this.user.weight;
      this.$axios.put(url,data)
        .then( (res)=> {
          if(res.data.code===0){
            this.$message({message:"信息修改成功！", type: 'success'});
          }
          else this.$message({message:"信息修改失败！", type: 'error'});
        }).catch(function (error) {
        console.log(error);
      } );
    },
    errorHandler() {
      return true
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    //上传成功时弹框
    success(res){
      this.user.photo=res.data;
      console.log(this.user.photo);
      this.$message.success('图片上传成功')
    },
    //上传文件让第二次覆盖第一的文件
    handleChange(file,fileList){
      if (fileList.length>0) {
        this.fileList=[fileList[fileList.length-1]]
      }
    },
    indexs:function() {
      this.user.id=sessionStorage.getItem("userId");
      var url = '/user/'+this.user.id;
      this.$axios.get(url)
        .then( (res)=> {
          this.user.username=res.data.data.username;
          this.user.photo=res.data.data.userphoto;
          this.user.age=res.data.data.age;
          this.user.sex=res.data.data.sex;
          this.user.email=res.data.data.email;
          this.user.phone=res.data.data.phone;
          this.user.sign=res.data.data.sign;
          this.user.profession=res.data.data.profession;
          this.user.height=res.data.data.height;
          this.user.weight=res.data.data.weight;
        }).catch(function (error) {
        console.log(error);
      } );
    },
  } ,
  created() {
    //自动加载indexs方法
    this.indexs();
  }

}
</script>

<style scoped>
.head1{
  /*border: #ffcc00 solid;*/
  height: 200px;
}
.el-card__body, .el-main{
  padding: 0;
}
.head2{
  position: relative;
  left: 5%;
  top:-80%;
}
.name1{
  position: relative;
  left: 40%;
  top:-280px;
  font-size: 25px;
  color: white;
}
.name2{
  position: relative;
  left: 40%;
  top:-270px;
  font-size: 20px;
  color: white;
}
.name3{
  position: relative;
  left: 70%;
  top:-230px;
  font-size: 15px;
  color: white;
  background: rgb(22,19,19);
  width: 80px;
  cursor:pointer;
}
</style>
